<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Canvas Paint</title>

        
        <script src="http://html5demos.com/h5utils.js"></script>
        <script src="jquery-1.7.2.min.js"></script>
        <style type="text/css"><!--
            #container { position: relative; }
            #imageView { border: 1px solid #000; }
            #imageTemp { position: absolute; top: 1px; left: 1px; }
            --></style>
        <!-- Jquery -->
        <script src="/jquery.textanimation.js"></script>
        <script src="/jquery-ui-1.8.18.custom.min.js"></script>
        <script src="/nowjs/now.js"></script>
        <script type="text/javascript" src="jscolor.js"></script>
        <script type="text/javascript" src="css3-multi-column.js"></script>
        
        <script type="text/javascript" src="paint.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
        <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
        
        
        


    </head>
    <body>

        <div id="header"> 
            <h1>Paint amélioré multiparticipant</h1>
            <h2>Fanny Gaudin & Amandine Tristrant</h2>

        </div>

        <div id="wrap">
            <br>
            <div id="bandeau">
                <a href="http://localhost:8080/#" target="_blank"><img src="images/ajouter.png" width=13 height=13 />  Nouveau participant</a>
            </div>

            <div id="left">


                <h2>Outil de dessin:</h2> 
                <select id="dtool">
                    <optgroup label='Géométrie'>
                        <option selected value="pencil">Crayon</option>
                        <option value="line">Ligne</option> 
                        <option value="rect">Rectangle</option>
                        <option value="circle">Cercle</option>
                    <optgroup label='Tampons'>
                        <option value="smiley">Smiley</option>
                        <option value="coeur">Coeur</option>
                    <optgroup label='Autres outils'>
                        <option value="gommer">Gommer</option>
                        <option value="ecrire">Texte</option>
                </select> 
                <div id="casePlein">
                <br/>Remplir la forme : <input type="checkbox" id="plein"/> 
                </div>
                <br/>Epaisseur : <input type="range" id="epaisseur" min="1" max="15" />
                <br/>Couleur : <input class="color" id="couleur" value="5C7CFF"/>
                <br/>
                <div id="tailleCoeur"> Taille : <input type="range" id="taille" min ="10" max="100"/></div>
                <br/><br/>
                <input type ="button" value="Effacer tout" title="Effacer le dessin" id="erase"/>
                <br/>
                <input type ="button" value="Sauvegarder" title="Sauvegarder le dessin" id="sauve"/>
                <br/>
                <input type ="button" value="Annuler" title="Annuler la dernière étape" id="annuler"/>
                <br/>

                <br/>
                <br/>
                <div id="dialogTexte">
                    <label for="ecrire-texte">Saisir votre texte</label>
                    <input type="text" id="ecrire-texte" value="" /><br/>   
                    <label for="ecrire-texte">Police</label>
                    <select id="police" name="Police">
                        <option value="Arial" style="font-family: Arial">Arial</option>
                        <option value="Tahoma" style="font-family:Tahoma">Tahoma</option>
                        <option value="Boopee" style="font-family:Boopee">Boopee</option>
                       <option value="Times New Roman" style="font-family:Times New Roman">Times New Roman</option>
                       
                    </select>
                    <label>Taille </label><input type="range" id="tailleTexte" min ="10" max="30"/>
                </div>
            </div>

            <div id="center">
                <h1 id="welcome"> </h1>
                <div id="container">
                    <canvas id="imageView" width="450" height="450">

                    </canvas>
                </div>
                <br>
            </div>


            <!-- Possibilité d'envoyer un message dans le chat avec "entrer" -->
            <div id="right">
                <div id="messages">
                </div>
                
                <br>
                <form id="send-form" action="#"> 
                    <!-- fonctionnalité : parlophone en français -->
                    <input type="text" id="text-input" required="required" x-webkit-speech />
                    <input type="submit" value="Envoyer" id="send-button">
                </form>
            </div>


            <div style="clear:both;"> </div>
            <div id="test"
                 ></div>
            
            <div id="readme">
                <div id="readme_titre">
                    <div><img src="images/readme.png" width=18 height=18 /></div>
                    <div>ReadMe</div> 
                    <div class="versBas" ></div>
                </div>
                <br/>
                <div id="readme_plus" class="clear">
                    <p>        
            Ce projet "Paint Multiparticipant" a été réalisé par Fanny Gaudin et Amandine Tristrant en HTML5. 
            Ce paint permet de dessiner à l'aide d'un crayon, de formes géométriques (cercle, rectangle, ligne droite), de tampons (<a href="http://code18.blogspot.fr/2012/01/dessiner-un-coeur-avec-le-canvas-html5.html" target="_blank">coeur</a> et <a href="http://www.siteduzero.com/tutoriel-3-626116-l-element-canvas.html" target="_blank">smiley</a>) mais également de gommer et d'écrire du texte. Il est également possible de régler la taille, l'épaisseur, de choisir des couleurs, de sauvegarder une image (après avoir cliqué sur le bouton, il suffit de faire clic droit et "enregistrer sous"), d'effacer le contenu du canvas ou encore d'annuler une étape de dessin.
            Ce paint est dit "multiparticipant" car il est possible d'avoir plusieurs participants pour dessiner, ou encore pour dialoguer à l'aide du chat (qui contient un <a href="http://slides.html5rocks.com/#speech-input" target="_blank">parlophone</a>). Nous avons utilisé la librairie <a href="http://jquery.com/" target="_blank">JQuery</a> pour l'affichage du ReadMe, de la taille du coeur, de l'affichage du texte dans une boite de <a href="http://docs.jquery.com/UI/Dialog" target="_blank">Dialog</a> ou encore l'<a href="http://sideroad.secret.jp/plugins/jQueryTextAnimation/" target="_blank">animation</a> du texte.
            Nous avons utilisé le CSS3 comme par exemple, pour l'affichage en <a href="http://designshack.developpez.com/tutoriels/css/introduction-css3-multiples-colonnes/#LII" target="_blank">multicolonne</a> du Readme.
                    </p>
                </div>
            </div>

        </div>

        <div id="footer">
            &copy; Copyright 2012 - <a href="#">Paint de Fanny Gaudin et Amandine Tristrant</a> | Design par <a href="http://www.free-css-templates.com/">Free CSS Templates</a>
        </div>

    </body>
</html>

